<template>
  <uni-nav-bar title="身份管理" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package space-between" v-if="friendAll">
    <view>用户ID</view>
    <view>{{friendAll.nickname}}（{{friendAll.id}}）</view>
  </view>
  <view class="package" v-for="item in list" :key='item.id'>
    <view class="space-between">
      <view>{{item.name}}</view>
      <uni-icons type="plus-filled" size="30" color="#2694FB" @click="increase(item.id)"></uni-icons>
    </view>
    <view class="center list">
      <view v-for="items in item.list" :key='items.id'>
        <text>{{items.code}}</text>
        <uni-icons type="clear" size="20" style="position: absolute;top: -20rpx;right:-10rpx" color="#999"
          @click="del(item.id,items.id)"></uni-icons>
      </view>
    </view>
  </view>
  <!-- 选择加注机弹框 -->
  <AddList @submit="submit" ref="addLists"></AddList>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import { onLoad } from '@dcloudio/uni-app';
  import AddList from '@c/administrator/BulletBox/addList.vue';
  import { errorToast, showLoading } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  import { getDriverRole, getDriverInfo } from '@/gql/administrator';
  import { ref } from 'vue';
  /**
   * 身份管理
   * @property {Null} addLists 加注机弹框
   * @property {Number} idenID 车友ID
   * @property {Object} friendAll 车友全部信息
   * @property {Array} list 身份列表
   * @property {Number} role_id 选中身份ID
   */
  const addLists = ref(null)
  const idenID = ref()
  const friendAll = ref()
  const list = ref()
  const role_id = ref()
  onLoad((pearm) => {
    idenID.value = pearm.id
    init()
    friends()
  })
  /**
   * 获取用户详情
   */
  function friends() {
    const payload = {
      query: getDriverInfo,
      variables: {
        driver_id: Number(idenID.value)
      },
    };
    toPublish(
      'ql/control/getDriverInfo',
      payload,
      (obj : any) => {
        const { getDriverInfo } = obj.data;
        friendAll.value = getDriverInfo
      }
    );
  }
  /**
   * 获取身份列表
   */
  function init() {
    const payload = {
      query: getDriverRole,
      variables: {
        driver_id: Number(idenID.value)
      },
    };
    toPublish(
      'ql/control/getDriverRole',
      payload,
      (obj : any) => {
        const { getDriverRole } = obj.data;
        list.value = getDriverRole
      }
    );
  }
  /**
   * 选择调整身份信息
   * @property {Number} id 选中身份ID
   */
  function increase(num : number) {
    role_id.value = num
    addLists.value.fillList(role_id.value)
    addLists.value.openBankPad()
  }
  /**
   * 添加用户身份
   * @property {Array} num 选中的加注机ID
   */
  function submit(num : any) {
    showLoading()
    const payload = {
      role_id: Number(role_id.value),
      driver_id: Number(idenID.value),
      fill_id: num.join(',')
    };
    toPublish(
      'control/addRoleFill',
      payload,
      (obj : any) => {
        const { code, msg } = obj;
        if (code === 1) {
          init()
        } else {
          errorToast(msg)
        }
      }
    );
  }
  /**
   * 删除用户身份
   * @property {Number} id 选中身份ID
   * @property {Number} ids 选中要删除的加注机ID
   */
  function del(id : number, ids : number) {
    showLoading()
    const payload = {
      role_id: id,
      driver_id: Number(idenID.value),
      fill_id: ids,
    };
    toPublish(
      'control/delRoleFill',
      payload,
      (obj : any) => {
        const { code, msg } = obj;
        if (code === 1) {
          init()
        } else {
          errorToast(msg)
        }
      }
    );
  }
</script>

<style scoped lang="less">
  .list {
    width: 100%;
    flex-wrap: wrap;

    view {
      min-width: 120rpx;
      background-color: #2694FB;
      color: #fff;
      text-align: center;
      border-radius: 5px;
      margin: 10rpx 15rpx 10rpx 0px;
      height: 56rpx;
      line-height: 56rpx;
      padding: 0px 20rpx;
      box-sizing: border-box;
      position: relative;
    }
  }
</style>